<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>8.el和data的其他写法</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器-->
    <div id="app">
        <h1>{{str}}</h1>
    </div>
</body>

<script type="text/javascript">
    // 1. el  写法
    /* new Vue({
        el: "#app",
        data: {
            str: "学习vue"
        }
    }) */

     // 2. el  写法
    /* new Vue({
        el:document.getElementById("app"),
        data: {
            str: "学习vue"
        }
    }) */

     // 3. el  写法
   /*  let vm = new Vue({
        data: {
            str: "学习vue"
        }
    }).$mount("#app");    // mount  挂载   */

    
    // 4. data 写法  值可以是对象，可以是函数
    new Vue({
        el:"#app",
        data(){   //data 只能是普通函数，不能是箭头函数
            console.log(",,,,",this);
            return {
                str:"这是一个函数"
            }
        }
    })




   
</script>

</html>